<template>
  <div>
    <jxf-titletip title="权限设置" :hasRefresh="false" :hasGoBack="true"
                  @goBack="$emit('update:showChangeDepartment', false)"></jxf-titletip>
    <el-card class="mt20">
      <div slot="header">
        <span>当前部门：{{info.name}}</span>
      </div>
      <div v-for="menus in menuAll" :key="menus.id">
        <el-card class="mb20">
          <div slot="header">
            <el-checkbox :indeterminate="menus.isIndeterminate" v-model="menus.checked"
                         @change="handleCheckMenusChange(menus)">
              {{menus.menuName}}
            </el-checkbox>
          </div>
          <div>
            <el-checkbox-group v-model="menus.checkedChilds" @change="handleCheckedMenuChange(menus)">
              <el-checkbox v-for="menu in menus.sonMenus" :label="menu.menuName" :key="menu.id">{{menu.menuName}}
              </el-checkbox>
            </el-checkbox-group>
          </div>
        </el-card>
      </div>
      <el-card class="mb20 text-center bg-gray">
        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
      </el-card>
      <p class="text-center mt20">
        <el-button @click="$emit('update:showChangeDepartment', false)">取 消</el-button>
        <el-button type="primary" @click="updateDepartmentMenu">确 定</el-button>
      </p>
    </el-card>
  </div>
</template>
<script>
  export default {
    name: "ChangeDepartment",
    props: {
      showChangeDepartment: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        info: {
          id: null,
          name: ""
        },
        menuAll: [],
        checkAll: false,
        isIndeterminate: false
      }
    },
    methods: {
      getPropertyInfo(row) {
        this.info = row
        ajax.get(apis.auth.getPropertyInfo, {id: row.id})
          .then(res => {
            if (res.success === true) {
              this.menuAll = this.formatData(res.data)
              console.log(this.menuAll)
            } else {
              this.$message({
                message: res.message,
                type: 'error'
              })
            }
          })
      },
      formatData(data) {
        let checkedChilds = [], isIndeterminate = false, checked = false
        if (data.selectMenu !== null && data.selectMenu !== []) {
          this.isIndeterminate = true
          let len = data.selectMenu.length, count = 0
          if (len === data.allMenu.length) {
            data.allMenu.forEach(fItem => {
              data.selectMenu.forEach(fSItem => {
                if (fItem.id === fSItem.id && fItem.sonMenus.length === fSItem.sonMenus.length) {
                  count++
                  return true
                }
              })
            })
            if (len === count) {
              this.checkAll = true
              this.isIndeterminate = false
            }
            return this.formatNotAll(data)
          } else {
            return this.formatNotAll(data)
          }
        } else {
          return data.allMenu.map(item => {
            return {
              id: item.id,
              menuName: item.menuName,
              sonMenus: item.sonMenus,
              isIndeterminate: isIndeterminate,
              checked: checked,
              checkedChilds: checkedChilds
            }
          })
        }

      },
      formatNotAll(data) {
        let checkedChilds = [], isIndeterminate = false, checked = false
        return data.allMenu.map(item => {
          checkedChilds = []
          isIndeterminate = false
          checked = false
          data.selectMenu.forEach(cItem => {
            if (item.id === cItem.id) {
              isIndeterminate = !(cItem.sonMenus.length === item.sonMenus.length)
              checked = cItem.sonMenus.length === item.sonMenus.length
              cItem.sonMenus.forEach(sCItem => {
                checkedChilds.push(sCItem.menuName)
              })
              return true
            }
          })
          return {
            id: item.id,
            menuName: item.menuName,
            sonMenus: item.sonMenus,
            isIndeterminate: isIndeterminate,
            checked: checked,
            checkedChilds: checkedChilds
          }
        })
      },
      updateDepartmentMenu() {
        let menuId = []
        this.menuAll.forEach(item => {
          if (item.checkedChilds.length > 0) {
            menuId.push(item.id)
            item.sonMenus.forEach(cItem => {
              if (item.checkedChilds.indexOf(cItem.menuName) >= 0) {
                menuId.push(cItem.id)
              }
            })
          }
        })
        ajax.post(apis.auth.updateProperty, {id: this.info.id, menuId: menuId})
          .then(res => {
            if (res.success === true) {
              this.$message({
                message: "权限修改成功,该角色的所有用户将重新登录！",
                type: 'success'
              });
              this.$emit('update:showChangeDepartment', false)
            } else {
              this.$message({
                message: res.message,
                type: 'error'
              })
            }
          })
      },
      handleCheckMenusChange(value) {
        if (value.checked) {
          value.checkedChilds = []
          value.sonMenus.map(item => {
            value.checkedChilds.push(item.menuName)
          })
        }
        else {
          value.checkedChilds = []
        }
        value.isIndeterminate = false;
        this.isCheckAll()
      },
      handleCheckedMenuChange(value) {
        value.checked = value.sonMenus.length === value.checkedChilds.length
        value.isIndeterminate = value.checkedChilds.length > 0 && value.sonMenus.length > value.checkedChilds.length
        this.isCheckAll()
      },
      handleCheckAllChange(value) {
        if (value) {
          this.menuAll.map(item => {
            item.checked = true
            item.sonMenus.map(CItem => {
              item.checkedChilds.push(CItem.menuName)
            })
          })
        } else {
          this.menuAll.map(item => {
            item.checked = false
            item.checkedChilds = []
          })
        }
        this.isIndeterminate = false;
      },
      // 全选判断
      isCheckAll() {
        let len = 0
        this.menuAll.map(item => {
          if (item.checked) {
            len++
          }
        })
        if (len > 0 && len < this.menuAll.length) {
          this.isIndeterminate = true
        } else {
          this.isIndeterminate = false
          if (len === this.menuAll.length) {
            this.checkAll = true;
          }
        }
      }
    },
    created() {
    }
  }
</script>

<style lang="scss" scoped>
  .el-checkbox-group {
    margin: -5px -10px;
    .el-checkbox {
      margin: 5px 10px;
    }
  }
</style>
